.tooltip-content {
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1;
  user-select: none;
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  box-shadow: var(--swm-backdrop-shadow);
  z-index: 11;
  border: var(--swm-dropdown-border);
  box-shadow: var(--swm-dropdown-shadow);

  svg {
    filter: drop-shadow(0 1px 0 var(--vscode-menu-border))
      drop-shadow(2px 0 8px var(--vscode-widget-shadow));
  }
}

.tooltip-primary {
  color: var(--swm-tooltip-primary);
  background-color: var(--swm-tooltip-primary-background);
}

.tooltip-secondary {
  color: var(--swm-tooltip-secondary);
  background-color: var(--swm-tooltip-secondary-background);
}

.tooltip-ternary {
  color: var(--swm-tooltip-ternary);
  background-color: var(--swm-tooltip-ternary-background);
}

.tooltip-content[data-state="delayed-open"][data-side="top"] {
  animation-name: slideDownAndFade;
}
.tooltip-content[data-state="delayed-open"][data-side="right"] {
  animation-name: slideLeftAndFade;
}
.tooltip-content[data-state="delayed-open"][data-side="bottom"] {
  animation-name: slideUpAndFade;
}
.tooltip-content[data-state="delayed-open"][data-side="left"] {
  animation-name: slideRightAndFade;
}

.tooltip-arrow {
  fill: var(--swm-tooltip-primary-background);
}
.tooltip-arrow-secondary {
  fill: var(--swm-tooltip-secondary-background);
}
.tooltip-arrow-ternary {
  fill: var(--swm-tooltip-ternary-background);
}

@keyframes slideUpAndFade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRightAndFade {
  from {
    opacity: 0;
    transform: translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDownAndFade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeftAndFade {
  from {
    opacity: 0;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
